/**
 * 学生考勤列表
 * @time 2017年11月2日11:01:12
 * @author 罗涛
 */
'use strict';
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import Header from './Common/Header'
import {newsStatus, imgOnError, getNowFormatDate} from '../Tool';
import {localData} from '../Tools/index';

import {HttpService, Toast}  from'../Http';
import touxiang from '../../src/img/touxiang.png'
import absence from '../../src/img/attendance/absence.png'
import classStatistics from '../../src/img/attendance/classStatistics.png'
import right_gray from '../../src/img/attendance/right_gray.png'
import phone_gray from '../../src/img/attendance/phone_gray.png'
import phone from '../../src/img/attendance/phone.png'
import Link from "./common/Link";

export default class teacherAttendance extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: new Date(),
            value: null,
            exceptionCount: [],//异常考勤数据
            teacherInfo: [],//教师信息
            listData: [],//考勤列表数据
            queryListData: [],//查询-考勤列表数据
            search: false,//输入框是否有值
        };
    }

    componentWillMount() {
        if(!localData.TeacherAtt){
            localData['TeacherAtt'] = {
                teacherInfo:[],
                exceptionCount:[],
                queryListData:[],
                listData:[],
            };
            this.getTeacherInfo();
            // this.getExceptionCount();
            this.getStudentList();
        }else{
            this.setState({
                teacherInfo:localData.TeacherAtt.teacherInfo,
                exceptionCount:localData.TeacherAtt.exceptionCount,
                queryListData:localData.TeacherAtt.queryListData,
                listData:localData.TeacherAtt.listData
            });
        }
    }

    /**
     * 获取教师信息
     */
    getTeacherInfo(){
        var rct = this;
        HttpService.query({
            url: '/teacherapp/teacher/getInfo',
            data: {
                token: localStorage.appToken,
            },
            success: (res => {
                if (res.code == 20012) {
                    rct.setState({teacherInfo: res.data});
                    localData.TeacherAtt['teacherInfo'] = res.data;
                    return
                }else{
                Toast.toast(res.msg);
                }
            })
        })
    }
    /**
     * 获取异常考勤人数
     */
    getExceptionCount(){
        var rct = this;
        HttpService.query({
            url: '/teacherapp/student/getExceptionCount',
            data: {
                token: localStorage.appToken,
                date: getNowFormatDate('yyyy-MM-dd')
            },
            success: (res => {
                if (res.code == 20012) {
                    rct.setState({exceptionCount: res.data});
                    localData.TeacherAtt['exceptionCount'] = res.data;

                    return
                }else{
                    Toast.toast(res.msg);
                }
            })
        })
    }
    /**
     * 获取学生考勤列表
     */
    getStudentList(){
        HttpService.query({
            url: '/teacherapp/student/getAttendanceList',
            data: {
                token: localStorage.appToken,
                date: getNowFormatDate('yyyy-MM-dd')
            },
            success: (res => {
                console.log(res);
                if (res.code == "20020") {
                    this.setState({
                        queryListData: res.data,
                        listData: res.data
                    });
                    localData.TeacherAtt['queryListData'] = res.data;
                    localData.TeacherAtt['listData'] = res.data;
                    return
                }
                Toast.toast(res.msg);
            })
        })
    }
    /**
     * 搜索
     */
    search(e) {
        e.preventDefault();
        let searchValue = document.querySelector('#searchValue').value;
        this.getSearch(searchValue);//查询本地列表数据
    }

    /**
     * 查询本地列表数据
     * @param searchValue
     */
    getSearch(searchValue) {
        let queryListData = this.state.queryListData;
        this.state.listData = [];
        for (let i = 0; i < queryListData.length; i++) {
            if (queryListData[i].realname.indexOf(searchValue) > -1) {
                this.state.listData.push(queryListData[i]);
            }
        }
        this.setState({listData: this.state.listData});
    }

    /**
     * 搜索
     */
    changeSearch(e) {
        if (e.target.value.length > 0) {
            this.setState({search: true});
        } else {
            this.setState({search: false});
        }
        this.getSearch(e.target.value);
    }

    /**
     * 清空输入框-并改变状态
     */
    searchEmpty() {
        document.querySelector('#searchValue').value = '';
        this.setState({search: false, listData: this.state.queryListData});
        // this.setType(this.state.type);
    }

    /**
     * 清空输入框
     */
    searchClose() {
        let searchValue = document.querySelector('#searchValue');
        searchValue.value = '';
        this.getSearch('');//重置列表
        searchValue.focus();
    }

    render() {
        let {search,teacherInfo,listData} = this.state;//exceptionCount
        let exceptionCount = 0;
        let listDataHtml = listData.map((data, index) => {
            let type = '无';
            // if(data.isabsence==true || data.isleftearly==true || data.iscomelate==true){
            if(data.isabsence|| data.isleftearly|| data.iscomelate|| data.isexception){
                type = '异常';
                exceptionCount++;
            }
            return(
                <Link to={'/kaoqinAtt/'+data.realname+'/'+data.studentid} className="student-info">
                    <img className="left-img" onError={imgOnError.bind(this,touxiang)} src={'/media'+data.headimg}/>
                    <div className="centent">
                        <div className="title">{data.realname}</div>
                        <div className="info">考勤状态：{type}</div>
                    </div>
                    {
                        data.devicetype == '2'?
                            <a href={'tel:'+data.telephone} className="phone">
                                <img className="right-img" src={phone}/>
                                <div >电话</div>
                            </a>
                            :
                            <span className="phone">
                                <img className="right-img" src={phone_gray}/>
                                <div >电话</div>
                            </span>
                    }

                </Link>
            )
        });
        return (
            <div className="teacherAtt">
                <Header title={localStorage.schoolName} left="1" />
                {/*<R_header_fixed title={localStorage.schoolName} left="1"/>*/}
                <div className={search == true ? 'query have_value' : 'query'}>
                    <form className="searchForm" action="" autoComplete='off' onSubmit={this.search.bind(this)}>
                        <div className="query_content ">
                            <input type="search" id="searchValue" autoComplete='off' className='left' maxLength='30'
                                   onChange={this.changeSearch.bind(this)} placeholder="搜索宝贝昵称"/>
                            <span className="close_img " onClick={this.searchClose.bind(this)}/>
                        </div>
                    </form>
                    <span className="cancel" onClick={this.searchEmpty.bind(this)}>取消</span>
                </div>
                {
                    search == false ?
                        <div>
                            <Link to="/ExceptionAtt" className="abnormal-attendance">
                                <img className="left-img" src={absence}/>
                                <div className="centent">
                                    <div className="title">{teacherInfo.length==0?'':teacherInfo.classname != undefined ?teacherInfo.classname:'请在“我的”里面填写班级名称'}</div>
                                    <div className="info">{exceptionCount==0?'0位学生考勤异常':<span>{exceptionCount}3位</span>}学生考勤异常</div>
                                </div>
                                <img className="right-img" src={right_gray}/>
                            </Link>
                            <Link to="/StatisticsAtt" className="statistics-attendance">
                                <img className="left-img" src={classStatistics}/>
                                <div className="centent">
                                    <div className="title">考勤统计</div>
                                    <div className="info">查看班级考勤统计</div>
                                </div>
                                <img className="right-img" src={right_gray}/>
                            </Link>
                            <div className="dataList-title-attendance">正常考勤学生</div>
                        </div>
                    :
                        ''
                }
                <div className="dataList-attendance">
                    {listDataHtml}
                    {/*<div className="student-info">*/}
                        {/*<img className="left-img" onError={imgOnError.bind(this,touxiang)} src=''/>*/}
                        {/*<div className="centent">*/}
                            {/*<div className="title">凌潇潇</div>*/}
                            {/*<div className="info">考勤状态：正常</div>*/}
                        {/*</div>*/}
                        {/*<a href="tel:13678419967" className="phone">*/}
                            {/*<img className="right-img" src={phone}/>*/}
                            {/*<div >电话</div>*/}
                        {/*</a>*/}
                    {/*</div>*/}
                    {/*<div className="student-info">*/}
                        {/*<img className="left-img" onError={imgOnError.bind(this,touxiang)}  src=''/>*/}
                        {/*<div className="centent">*/}
                            {/*<div className="title">凌潇潇</div>*/}
                            {/*<div className="info">考勤状态：正常</div>*/}
                        {/*</div>*/}
                        {/*<a href="tel:13678419967" className="phone">*/}
                            {/*<img className="right-img" src={phone_gray}/>*/}
                            {/*<div className="gray">电话</div>*/}
                        {/*</a>*/}
                    {/*</div>*/}
                </div>
            </div>
        )
    }
}
